<!DOCTYPE html>
<html>
  <head>
    <title>AO.space OpenAPI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        margin: 0;
        padding-top: 40px;
      }

      nav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
      }
      #links_container {
          margin: 0;
          padding: 0;
          background-color: #254293;
      }

      #links_container li {
          display: inline-block;
          padding: 10px;
          color: white;
          cursor: pointer;
      }
    </style>
  </head>
  <body>

    <!-- Top navigation placeholder -->
    <nav>
      <ul id="links_container">
      </ul>
    </nav>

    <redoc scroll-y-offset="body > nav"></redoc>

    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
    <!-- <script src="assets/redoc.standalone.js"> </script> -->

    <script>
      // list of APIS
      var apis = [
        {
          name: 'Home',
          url: 'pages/home.yaml'
        },
        {
          name: 'Agent',
          url: 'pages/agent.yaml'
        },
        {
          name: 'Gateway',
          url: 'pages/gateway.yaml'
        },
        {
          name: 'AOFS',
          url: 'pages/aofs.yaml'
        }
      ];

      // initially render first API
      Redoc.init(apis[0].url);

      function onClick() {
        var url = this.getAttribute('data-link');
        Redoc.init(url);
      }

      // dynamically building navigation items
      var $list = document.getElementById('links_container');
      apis.forEach(function(api) {
        var $listitem = document.createElement('li');
        $listitem.setAttribute('data-link', api.url);
        $listitem.innerText = api.name;
        $listitem.addEventListener('click', onClick);
        $list.appendChild($listitem);
      });
    </script>
  </body>
</html>